var step = 1000*60*60*24;//一天的毫秒数

function getNextDate(d,next){
    next=next||1;
    let nextDate = new Date(d)
    nextDate.setDate(d.getDate()+next)
    return nextDate
}
function getPrevDate(d,prev){
    prev= prev ||1;
    let prevDate = new Date(d)
    prevDate.setDate(d.getDate()-prev)
    return prevDate
}

function getYMD(d){
    var month = d.getMonth()+1,
        day = d.getDate()
    return{
        year:d.getFullYear(),
        month:month<10?'0'+month:month,
        day:day<10?'0'+day:day
    }
}
function getYMDStr(d){
    var d = getYMD(d)
    return `${d.year}-${d.month}-${d.day}`
}

let tempDate = new Date();

const nowYear = tempDate.getFullYear(),
    nowMonth = tempDate.getMonth(),
    nowDay = tempDate.getDate();

let nowDate= new Date(nowYear,nowMonth,nowDay)
let nextDate = getNextDate(nowDate,1)
let nextNextDate = getNextDate(nowDate,2)


let nextMonth = new Date(nowYear,nowMonth+1)
let nextNextMonth = new Date(nowYear,nowMonth+2)

export function createCalenderSingleMonth(d,addExtraClass){
    var month = d.getMonth(),
        year = d.getFullYear();
    var startDate = new Date(year,month,1)
    startDate.setDate(1);
    var endDate = new Date(year,month+1,0)

    var html = ''

    //第一周要特殊处理，第一天可能是周2，那么前前面两个div，没有内容，占位
    var startDay = startDate.getDay()
    var dateCursor = startDate.getTime();
    html+='<div class="calender-row">'
    for(let i = 0;i<7;i++){
            if(i<startDay){
                html+='<div class="calender-item"></div>'
            }else{
                let d = new Date(dateCursor)
                let dd = d.getDate();
                let extraClassName=''
                if(addExtraClass){
                    extraClassName= addExtraClass(d);
                }
                html+=`<div class="calender-item ${extraClassName}" data-time="${d.getTime()}" data-date="${d.getFullYear()}-${d.getMonth()+1}-${dd}"><i>${dd}</i></div>`
                dateCursor += step;
            }
    }
    html+='</div>'


    //第二周开始的那一天。
    var startTime = dateCursor,
        endTime = endDate.getTime();

    for(var i = startTime;i<endTime;i+=7*step){
        html+='<div class="calender-row">'

        for(var j = 0;j<7;j++){
            if(dateCursor>endDate.getTime()){break;}
            var d = new Date(dateCursor)
            let dd = d.getDate();
            let extraClassName=''
            if(addExtraClass){
                extraClassName= addExtraClass(d);
            }
            html+=`<div class="calender-item ${extraClassName}" data-time="${d.getTime()}" data-date="${d.getFullYear()}-${d.getMonth()+1}-${dd}"><i>${dd}</i></div>`
            dateCursor += step;

        }
        html+='</div>'
    }

    return `<div class="calender-month">
        <div class="month-info">${year}年 ${month+1}月</div>
        ${html}
    </div>`;
}

function addExtraDefault(d){
    if(d.getTime()==nowDate.getTime()){
        return 'today'
    }
    if(d<nowDate){
        return 'past'
    }
    return ''
}


export function createCalenderMount($el,addExtraClass){
    addExtraClass = addExtraClass || addExtraDefault;
    const calenderHtml =  createCalenderSingleMonth(nowDate,addExtraClass)+
        createCalenderSingleMonth(nextMonth,addExtraClass)+
        createCalenderSingleMonth(nextNextMonth,addExtraClass);
    const $container = $el.html(
        `
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup">
                <span class="icon icon-left"></span>
                返回
            </button>
            <h1 class="title js-calender-title">快速预订</h1>
        </header>
        <div class="content">
            <div class="calender-wrapper">
                <div class="calender-row">
                    <div class="calender-week-day">日</div>
                    <div class="calender-week-day">一</div>
                    <div class="calender-week-day">二</div>
                    <div class="calender-week-day">三</div>
                    <div class="calender-week-day">四</div>
                    <div class="calender-week-day">五</div>
                    <div class="calender-week-day">六</div>
                </div>
                ${calenderHtml}
            <div>
        </div>
        `
    )

    let inOutTimeObj={
        inTime:'',
        outTime:'',
        setInTime(time){
            this.inTime = time;
            var inStr = this.getInStr();
            $('.js-in-date').html(inStr)
            $('#js-input-in-time').val(inStr)
            this.autoCheck('in')
            return this;
        },
        setOutTime(time){
            this.outTime = time;
            var outStr = this.getOutStr()
            $('.js-out-date').html(outStr)
            $('#js-input-out-time').val(outStr)
            this.autoCheck('out')
            return this;
        },
        autoCheck(flag){
            if(this.inTime>=this.outTime){
                if(flag=='in'){
                    this.setOutTime(getNextDate(this.inTime))
                }else{
                    this.setInTime(getPrevDate(this.outTime))
                }
            }
        },
        getInStr(){
            return getYMDStr(this.inTime)
        },
        getOutStr(){
            return getYMDStr(this.outTime)
        }
    }

    !function initInOutTime(){
        inOutTimeObj.setInTime(nowDate)
            .setOutTime(nextDate)
    }()

    function makeCalenderActive(time){
        $('.calender-item').removeClass('active').each(function(){
            const $this = $(this);
            const dateArr =$this.attr('data-date');
            if(dateArr==time){
                $this.addClass('active')
                return false;
            }
        })
    }

    $('.selected-in-time').click(function(){
        makeCalenderActive(inOutTimeObj.getInStr())
        $('.js-calender-title').text('入住时间')
        $('.calender-item.today').removeClass('disabled')
        $container.attr('data-flag','in')
    })

    $('.selected-out-time').click(function(){
        makeCalenderActive(inOutTimeObj.getOutStr())
        $('.js-calender-title').text('离开时间')
        $('.calender-item.today').addClass('past')

        $container.attr('data-flag','out')
    })


    $('.js-shortcut-today').click(function(){
        inOutTimeObj.setInTime(nowDate)
    })

    $('.js-shortcut-tomorrow').click(function(){
        inOutTimeObj.setInTime(nextDate)
    })

    $('.js-shortcut-day-after-tomorrow').click(function(){
        inOutTimeObj.setInTime(nextNextDate)
    })

    $('.js-shortcut-prev').click(function(){
        const $this = $(this)
        if($this.hasClass('disabled'))return;
        inOutTimeObj.setOutTime( getPrevDate(inOutTimeObj.outTime))
        if(inOutTimeObj.outTime<=nextDate){
            inOutTimeObj.setOutTime( nextDate )
            $this.addClass('disabled')
        }

    })

    $('.js-shortcut-next').click(function(){
        const $this = $(this)
        if($this.hasClass('disabled'))return;
        inOutTimeObj.setOutTime( getNextDate(inOutTimeObj.outTime))
        $('.js-shortcut-prev').removeClass('disabled')
    })

    $container.on('click','.calender-item',function(){
        const $this = $(this);
        if($this.hasClass('past'))return

        const flag = $container.attr('data-flag')

        let time = $this.attr('data-time')
        if(!time){
            return;
        }
        time = time*1;
        var d = new Date(time)

        if(flag=='out'){
            inOutTimeObj.setOutTime(d)
        }else{
            inOutTimeObj.setInTime(d)
        }
        $.closeModal('.popup-calender')
    })


}





